<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="../css/animsition.min.css" >
		<link rel="stylesheet" type="text/css" href="../css/drop-down.css" >
		<link rel="stylesheet" type="text/css" href="../css/common.css" >
		<link rel="stylesheet" type="text/css" href="../css/system.css" >
		<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" media="all" />
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;
				/* background-color: #efefef; */
				overflow: hidden;
			}

			.content{
				display: flex;
				/* justify-content: space-around; */
				justify-content: center;
			}
			.Panel{
				height: 100px;
				width: 100%;
				background-color: #fff;
			}
			.Panel_text{
				font-size: 28px;
				font-weight: bold;
				width: 200px;
				height: 50px;
				margin: 0 100px;
				padding-top: 30px;
			}
			
			.pa_form{
				margin-top: 20px;
			}
		
			.layui-container {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}
		
			.bar1 {
				height: 40px;
				margin-top: 20px;
			}
		
			.bar1 h1 {
				font-size: 22px;
				margin-left: 50px;
			}
		
			.Sales_Presentation {
				width: 800px;
				height: 500px;
				background-color: #fff;
				/* border: 1px solid #EEEEEE; */
				margin: 20px 0px;
			}
			.layui-row{
				display: flex;
				justify-content: space-between;
				margin-bottom: 50px;
			}
		
			.layui-col-md5 {
				height: 130px;
				padding: 0px 15px;
				margin: 20px 20px;
				box-shadow: 1px 1px 6px #E2E2E2;
			}
		
			.layui-col-md8 {
				top: 30%;
			}
		
			.cu_number {
				font-size: 20px;
			}
		
			.layui-col-md4 {
				top: 30%;
				text-align: center;
			}
			
			.cu_left{
				display: flex;
				padding-left: 10px;
			}
			
			.cu_letf_top{
				font-size: 20px;
				font-family: "blackadder itc";
			}
		
			.cu_right {
				border-left: 1px solid #aaa;
			}
		
			.cu_percent {
				font-size: 20px;
				color: #2bbf24;
			}
		
			.shodow-item_change {
				box-shadow: 2px 2px 10px #909090;
			}
			.layui-icon{
				font-size: 30px;
			}
		</style>
		
		<script src="../js/jquery.min.js"></script>
		
		<script>
		    $(function () {
		        $.ajax({
		            url: '../activity/findAll',
		            type: 'get',
		            data: {
		                "page": 1,
		                "limit": 20
		            },
		            success: function (data) {
		                var n = data.data.length;
		                var labels = "";
		                console.log(data.data[0].ac_create_time);
		                for (var i = 0; i < n; i++) {
		                    var time = data.data[i].ac_create_time;
		                    var introduction = data.data[i].ac_introduction;
		                    labels += "<li class=\"layui-timeline-item\">";
		                    labels += "<i class=\"layui-icon layui-timeline-axis\"></i>";
		                    labels += "<div class=\"layui-timeline-content layui-text\">";
		                    labels += "<h3 class=\"layui-timeline-title\" id=\"time\">" + time + "</h3>";
		                    labels += "<p>" + introduction + "</p>";
		                    labels += "</div>";
		                    labels += "</li>";
		                    $(".layui-timeline").html(labels);
		                }
		            }
		        });
		    })
		
		</script>
	</head>
	<body>
	<div class="Panel">
		<div class="Panel_text">
			数据一览
		</div>
	</div>
		<div class="layui-container">
		<div class="content">
			<div class="Sales_Presentation">
				<div class="salesText">
					<div class="bar1">
						<h1>销售简报</h1>
					</div>
					<div class="layui-row layui-col-space10">
						<div class="layui-col-md5 shodow-item">
							<div class="layui-col-md8">
								<div class="cu_left">
									<div class="layui-icon layui-icon-dollar" style="width:30px;height: 30px;margin-right: 5px;"></div>
									<div class="cu_letf_top">
										<div class="">新增客户(人)</div>
										<div class="cu_number" id="cu_number">0</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md4">
								<div class="cu_right">
									<div class="">较上月</div>
									<div class="cu_percent">100%</div>
								</div>
							</div>
						</div>
						<div class="layui-col-md5 shodow-item">
							<div class="layui-col-md8">
								<div class="cu_left">
									<div class="layui-icon layui-icon-dollar" style="width: 30px;height: 30px;margin-right: 5px;"></div>
									<div class="cu_letf_top">
										<div class="">新增联系人(人)</div>
										<div class="cu_number" id="li_number">0</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md4">
								<div class="cu_right">
									<div class="">较上月</div>
									<div class="cu_percent">100%</div>
								</div>
							</div>
						</div>
					</div>
			
					<div class="layui-row layui-col-space10">
						<div class="layui-col-md5 shodow-item">
							<div class="layui-col-md8">
								<div class="cu_left">
									<div class="layui-icon layui-icon-dollar" style="width: 30px;height: 30px;margin-right: 5px;"></div>
									<div class="cu_letf_top">
										<div class="">新增合同</div>
										<div class="cu_number" id="co_number">0</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md4">
								<div class="cu_right">
									<div class="">较上月</div>
									<div class="cu_percent">100%</div>
								</div>
							</div>
						</div>
						<div class="layui-col-md5 shodow-item">
							<div class="layui-col-md8">
								<div class="cu_left">
									<div class="layui-icon layui-icon-dollar" style="width: 30px;height: 30px;margin-right: 5px;"></div>
									<div class="cu_letf_top">
										<div class="">合同金额(元)</div>
										<div class="cu_number" id="money">0</div>
									</div>
								</div>
							</div>
							<div class="layui-col-md4">
								<div class="cu_right">
									<div class="">较上月</div>
									<div class="cu_percent">100%</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right" style="width: 500px;height: 500px;background-color: #fff;margin: 20px 0 0 170px;padding: 0 20px">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
				    <legend>活动时间线</legend>
				</fieldset>
				<ul class="layui-timeline">
				
				</ul>
			</div>
		</div>
		</div>
		<!--<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery-3.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/panel.js" type="text/javascript" charset="utf-8"></script>-->
		<script src="../js/jquery.min.js"></script>
		<script src="../js/jquery-ui.min.js"></script>
		<script src="../js/select-widget-min.js"></script>
		<script src="../js/jquery.animsition.min.js"></script>
		<script src="https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
		<script src="../js/macarons.js"></script>
	<script>
		$.ajax({
			url:'../customer/findAll',
			// type:'get',
			data:{
				page:1,
				limit:40
			},
			datatype: "JSON",
			success:function (data) {
				// alert(data.data.length)
				$("#cu_number").html(data.data.length)
			}
		});

		$.ajax({
			url:'../linkman/findAll',
			data:{
				page:1,
				limit:40
			},
			dataType:"JSON",
			success:function (data) {
				$("#li_number").html(data.data.length)
			}
		});

		$.ajax({
			url:'../contract/findAll',
			data:{
				page:1,
				limit:40
			},
			dataType:"JSON",
			success:function (data) {
				$("#co_number").html(data.data.length)
			}
		});


		$.ajax({
			url:'../contract/findAll',
			data:{
				page:1,
				limit:40
			},
			dataType:'JSON',
			success:function (data) {
				var money=0;
				for (var i = 0; i < data.data.length; i++) {
					money+=data.data[i].co_money;
				}
				$("#money").html(money)
			}
		});
	</script>

	</body>
</html>
